<template>
	<div class="into" style="width:80%; margin-left: 5%;">
		<div class="topTitle">
			<span style="color:#5cd9e8">
				<svg-icon icon-class="stotop"></svg-icon>
			</span>
			<span class="fs-xl text mx-2">今日任务完成情况</span>
		</div>
		<div class="content">
			<dv-capsule-chart :config="config" style="height:80% " />
		</div>
		<!-- <el-table>
			<el-table :data="tableData" style="width: 100%;">
				<el-table-column prop="date" label="日期" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
			</el-table>
		</el-table> -->
	</div>
</template>

<script>
	const echarts = require("echarts");
	//import api from '@/http/api'
	export default {
		data() {
			return {
				config: {
					data: [{
							name: '入库总数',
							value: ''
						},
						{
							name: '入库未完成',
							value: ''
						},
						{
							name: '移库总数',
							value: ''
						},
						{
							name: '移库未完成',
							value: ''
						},
						{
							name: '出库总数',
							value: ''
						},
						{
							name: '出库未完成',
							value: ''
						},
						{
							name: '领用总数',
							value: ''
						},
						{
							name: '领用未完成',
							value: ''
						},
						{
							name: '盘点总数',
							value: ''
						},
						{
							name: '盘点未完成',
							value: ''
						},

					],
					showValue: true
					/* activeRadius: "70%",
					showOriginValue: true,
					radius: "60%", */
					/*unit: '单位',*/
					/* colors: ['#d0d0d0', '#676fd3', '#f8ff61', '#ff9b29', '#d33e04', '#9a046d'] */
				},
				
			}
		},
		mounted() {
			/* this.fetchData() */
		},
		created() {
			//this.getDataList()
		},
		methods: {
			// fetchData() {
			// 	//首页异常监控
			// 	this.$http.get('/API/taskStatus', ).then(response => {
			// 		let alarm = "";
			// 		console.log(response)
			// 		let config = [];
			// 		config = this.config.data;
			// 		config.foreach((item) => {
			// 			item.value=0;
			// 		})

			// 		if (response.code === 0) {
			// 			alarm = response.data;
			// 			alarm.foreach((item) => {
			// 				let tasktype = item.tasktype;
			// 				let allcount = item.allcount;
			// 				let undo = item.undo;
			// 				if (tasktype == 'PA') {
			// 					config[0].value = allcount;
			// 					config[1].value = undo;
			// 				} else if (tasktype == 'MV') {
			// 					config[2].value = allcount;
			// 					config[3].value = undo;
			// 				}else if (tasktype == 'PICK') {
			// 					config[4].value = allcount;
			// 					config[5].value = undo;
			// 				}  else if (tasktype == 'PY') {
			// 					config[6].value = allcount;
			// 					config[7].value = undo;
			// 				} else if (tasktype == 'CC') {
			// 					config[8].value = allcount;
			// 					config[9].value = undo;
			// 				}
			// 			})

			// 			// let config = [];
			// 			// config = this.config.data;
			// 			// config[0].value = alarm.pa;
			// 			// config[1].value = alarm.MV;
			// 			// config[2].value = alarm.PICK;
			// 			// config[3].value = alarm.CC;
			// 			// config[4].value = alarm.high;
			// 			// config[5].value = alarm.disaster;
			// 			/**
			// 			 * 使用ES6拓展运算符生成新的props对象
			// 			 * 组件侦知数据变化 自动刷新状态
			// 			 */
			// 			this.config = {
			// 				...this.config
			// 			}
			// 			setTimeout(this.fetchData, 60000);

			// 		}


			// 	})
			// },
			getDataList: function() {
				this.$http.get('/API/taskStatus', ).then((response) => {
					if (response.data.code == 0) {
						let alarm = "";
						console.log(response)
						let config = [];
						config = this.config.data;
						config.forEach((item) => {
							item.value = 0;
						})
						alarm = response.data.data;
						alarm.forEach((item) => {
							let tasktype = item.tasktype;
							let allcount = item.allcount;
							let undo = item.undo;
							if (tasktype == 'PA') {
								config[0].value = allcount;
								config[1].value = undo;
							} else if (tasktype == 'MV') {
								config[2].value = allcount;
								config[3].value = undo;
							} else if (tasktype == 'PICK') {
								config[4].value = allcount;
								config[5].value = undo;
							} else if (tasktype == 'PY') {
								config[6].value = allcount;
								config[7].value = undo;
							} else if (tasktype == 'CC') {
								config[8].value = allcount;
								config[9].value = undo;
							}
						})
						this.config = {
							...this.config
						}


					}
					setTimeout(this.getDataList, 10000);
				})
			},
			destroyed() {
				window.onresize = null;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.into {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.topTitle {
			height: 10%;
			padding-top: 15px;
		}

		.content {
			flex: 2;
		}
	}
	 .table-wrapper /deep/ .el-table--fit{
	        padding: 20px;
	}
	 .table-wrapper /deep/  .el-table, .el-table__expanded-cell {
	    background-color: transparent;
	}
	
	 .table-wrapper /deep/ .el-table tr {
	    background-color: transparent!important;
	}
	 .table-wrapper /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
	    background-color: transparent;
	}
</style>
